  <!-- swiper 轮播-->
<template>
    <div class="swiper-container" ref='swiper'>
        <div class="swiper-wrapper" >
            <a class="swiper-slide"><img src="../../public/images/index/img_1.png" alt=""></a>
            <a class="swiper-slide"><img src="../../public/images/index/img_5.png" alt=""></a>
            <a class="swiper-slide"><img src="../../public/images/index/img_6.png" alt=""></a>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" ref='pagination'></div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
        this.initSwiper()
    });
  },
  computed: {},
  methods: {
    initSwiper() {
      var el = this.$refs.swiper
      new Swiper(el, {
        iOSEdgeSwipeDetection: true,
        iOSEdgeSwipeThreshold: 50,
        autoplay: {
          disableOnInteraction: false
        },
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: this.$refs.pagination
        }
      });
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
//swiper
.swiper-container{
    height: 3.5rem;
    border-radius: $radius-10;
    overflow: hidden;
}
.swiper-pagination-bullet{
    background: white;
    width: .14rem;
    height: .14rem;
    border-radius: .07rem;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: $c-ffba17;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
    bottom: .1rem ;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 .1rem;
}
</style>